Adwaita: needs-attention on sidebar-item

Unfortunatelly it doesn't animate (not my fault) and it just work
on GtkLabel (my fault).

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 6b4898563b5e0d09521ff834b898a3e00954b92c..07047730bde873a06336a6ddffa56b833e14e290 100644 (file)
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -539,30 +539,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
       padding: 5px 2px;
     }
     &.needs-attention > GtkLabel,
-    &.needs-attention > GtkImage {
-      animation: needs_attention 150ms ease-in;
-      $_dot_shadow: _text_shadow_color();
-      $_dot_shadow_r: if($variant=='light',0.5,0.45);
-      background-image: -gtk-gradient(radial,
-                                      center center, 0,
-                                      center center, 0.5,
-                                      to($_dot_color),
-                                      to(transparent)),
-                        -gtk-gradient(radial,
-                                      center center, 0,
-                                      center center, $_dot_shadow_r,
-                                      to($_dot_shadow),
-                                      to(transparent));
-      background-size: 6px 6px, 6px 6px;
-      background-repeat: no-repeat;
-      @if $variant == 'light' { background-position: right 3px, right 4px; }
-      @else { background-position: right 3px, right 2px; }
-      &:backdrop { background-size: 6px 6px, 0 0;}
-      &:dir(rtl) {
-        @if $variant == 'light' { background-position: left 3px, left 4px; }
-        @else { background-position: left 3px, left 2px; }
-      }
-    }
+    &.needs-attention > GtkImage { @extend %needs_attention; }
     &.needs-attention:active > GtkLabel,
     &.needs-attention:active > GtkImage,
     &.needs-attention:checked > GtkLabel,
@@ -594,6 +571,32 @@ $_dot_color: if($variant=='light', $selected_bg_color,
   .linked.vertical &:backdrop { @extend %linked_vertical; }
 }
 
+%needs_attention {
+  animation: needs_attention 150ms ease-in;
+  $_dot_shadow: _text_shadow_color();
+  $_dot_shadow_r: if($variant=='light',0.5,0.45);
+  background-image: -gtk-gradient(radial,
+                                  center center, 0,
+                                  center center, 0.5,
+                                  to($_dot_color),
+                                  to(transparent)),
+                    -gtk-gradient(radial,
+                                  center center, 0,
+                                  center center, $_dot_shadow_r,
+                                  to($_dot_shadow),
+                                  to(transparent));
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+  @if $variant == 'light' { background-position: right 3px, right 4px; }
+  @else { background-position: right 3px, right 2px; }
+  &:backdrop { background-size: 6px 6px, 0 0;}
+  &:dir(rtl) {
+    @if $variant == 'light' { background-position: left 3px, left 4px; }
+    @else { background-position: left 3px, left 2px; }
+  }
+}
+
+
 // all the following is for the +|- buttons on inline toolbars, that way
 // should really be deprecated...
 .inline-toolbar GtkToolButton > .button { // redefining the button look is
@@ -2556,7 +2559,15 @@ GtkFileChooserDialog {
 }
 
 .sidebar-item {
-  padding: 10px;
+  padding: 10px 4px;
+  > GtkLabel {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+  &.needs-attention > GtkLabel {
+    @extend %needs_attention;
+    background-size: 6px 6px, 0 0;
+  }
 }
 
 GtkPaned {

diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 7fe4c8619e65bdc14e2cd8e559c8a885faf35738..8160a3f03f3c1a725593238cd9943fb75289b89e 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -850,16 +850,6 @@ GtkCalendar.header .button.titlebutton {
   .titlebar .stack-switcher > .titlebutton.button,
   GtkCalendar.header .stack-switcher > .titlebutton.button {
     padding: 5px 2px; }
-  .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
-    animation: needs_attention 150ms ease-in;
-    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent));
-    background-size: 6px 6px, 6px 6px;
-    background-repeat: no-repeat;
-    background-position: right 3px, right 2px; }
-    .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
-      background-size: 6px 6px, 0 0; }
-    .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
-      background-position: left 3px, left 2px; }
   .stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
     animation: none;
     background-image: none; }
@@ -877,6 +867,17 @@ GtkCalendar.header .button.titlebutton {
   GtkCalendar.header .primary-toolbar .button.titlebutton {
     icon-shadow: none; }
 
+.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage, .sidebar-item.needs-attention > GtkLabel {
+  animation: needs_attention 150ms ease-in;
+  background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent));
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+  background-position: right 3px, right 2px; }
+  .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop, .sidebar-item.needs-attention > GtkLabel:backdrop {
+    background-size: 6px 6px, 0 0; }
+  .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl), .sidebar-item.needs-attention > GtkLabel:dir(rtl) {
+    background-position: left 3px, left 2px; }
+
 .inline-toolbar GtkToolButton > .button, .inline-toolbar .header-bar GtkToolButton > .button.titlebutton, .header-bar .inline-toolbar GtkToolButton > .button.titlebutton,
 .inline-toolbar .titlebar GtkToolButton > .button.titlebutton,
 .titlebar .inline-toolbar GtkToolButton > .button.titlebutton,
@@ -3882,7 +3883,12 @@ GtkFileChooserDialog .dialog-action-box {
     background-color: #215d9c; }
 
 .sidebar-item {
-  padding: 10px; }
+  padding: 10px 4px; }
+  .sidebar-item > GtkLabel {
+    padding-left: 6px;
+    padding-right: 6px; }
+  .sidebar-item.needs-attention > GtkLabel {
+    background-size: 6px 6px, 0 0; }
 
 GtkPaned {
   margin: 0 8px 8px 0; }

diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index e57ebb4d9b046adef54fb65a41a0f385904607b7..49f5d121ca012da62838fbcf4dcc936e6b892a4a 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -842,16 +842,6 @@ GtkCalendar.header .button.titlebutton {
   .titlebar .stack-switcher > .titlebutton.button,
   GtkCalendar.header .stack-switcher > .titlebutton.button {
     padding: 5px 2px; }
-  .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
-    animation: needs_attention 150ms ease-in;
-    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent));
-    background-size: 6px 6px, 6px 6px;
-    background-repeat: no-repeat;
-    background-position: right 3px, right 4px; }
-    .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
-      background-size: 6px 6px, 0 0; }
-    .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
-      background-position: left 3px, left 4px; }
   .stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
     animation: none;
     background-image: none; }
@@ -869,6 +859,17 @@ GtkCalendar.header .button.titlebutton {
   GtkCalendar.header .primary-toolbar .button.titlebutton {
     icon-shadow: none; }
 
+.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage, .sidebar-item.needs-attention > GtkLabel {
+  animation: needs_attention 150ms ease-in;
+  background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent));
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+  background-position: right 3px, right 4px; }
+  .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop, .sidebar-item.needs-attention > GtkLabel:backdrop {
+    background-size: 6px 6px, 0 0; }
+  .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl), .sidebar-item.needs-attention > GtkLabel:dir(rtl) {
+    background-position: left 3px, left 4px; }
+
 .inline-toolbar GtkToolButton > .button, .inline-toolbar .header-bar GtkToolButton > .button.titlebutton, .header-bar .inline-toolbar GtkToolButton > .button.titlebutton,
 .inline-toolbar .titlebar GtkToolButton > .button.titlebutton,
 .titlebar .inline-toolbar GtkToolButton > .button.titlebutton,
@@ -4043,7 +4044,12 @@ GtkFileChooserDialog .dialog-action-box {
     background-color: #4a90d9; }
 
 .sidebar-item {
-  padding: 10px; }
+  padding: 10px 4px; }
+  .sidebar-item > GtkLabel {
+    padding-left: 6px;
+    padding-right: 6px; }
+  .sidebar-item.needs-attention > GtkLabel {
+    background-size: 6px 6px, 0 0; }
 
 GtkPaned {
   margin: 0 8px 8px 0; }